<template>
	<div class="page-comment">
		<div class="table-view" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
		  <li class="cell" v-for="(item,index) in items">
	  		<div class="header-content">
	  			<div class="header-img">
	  				<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2531384262,3699915741&fm=27&gp=0.jpg"/>
	  			</div>
	  			<div class="cname">{{item.createdBy}}</div>
	  			<Rate allow-half v-model="item.reviewScore" style="float: right;"></Rate>
		  	</div>
		  	<div class="comment-content">{{item.reviewContent}}</div>
		  	<div class="comment-date">{{item.createdDate | formatDate}}</div>
		  </li>
		</div>
		<mt-button class="com-btn" @click="clickBtn()">评论</mt-button>
		<mt-popup class="mint-popup mint-popup-4 mint-popup-bottom" style="width: 100%;" v-model="popupVisible" position="bottom"> 
			<div style="width:100%;height: 6rem;">
				<mt-header title="评论区">
				  <router-link to="/" slot="left">
				  </router-link>
				  <mt-button slot="right" @click="ensure()">确定</mt-button>
				</mt-header>
				<div class="com">
					<label>评分</label><Rate allow-half v-model="valueHalf"></Rate><label style="margin-left: 1rem;">{{valueHalf}}</label>
				</div>
				<div class="com">评价</div>
				<div class="com">
					<mt-field label="" placeholder="我想说的话" type="textarea" rows="4" v-model="introduction"></mt-field>
				</div>
			</div>
		</mt-popup>
	</div>
</template>

<style>
	@import url("commemt.css");
</style>
<script>
	import $ from 'jquery'
    export default {
        name: "index",
        data:function(){
        		return {
        			items:[],
        			pageNo:0,
        			popupVisible:false,
        			valueHalf:0,
        			introduction:'',
        			modal1: false
        		};
        },
        created(){
        		document.title = '评论';
        },
        methods:{
        		loadMore() {
			  this.loading = true;
			  this.pageNo++;
			  var _self = this;
			  $.ajax({
			  	type:"post", 
			  	contentType:'application/json;charset=UTF-8',
			  	url:this.utils.rootUrl + "fashion/fashionCommentList?pageSize=10&pageNo="+_self.pageNo,
			  	data:JSON.stringify({
			  		id:_self.$route.params.id
			  	}),
			  	success:function(res){
			  		console.log(JSON.stringify(res))
			  		var dataList = res.dataList;
			  		for(var i in dataList){
			  			_self.items.push(dataList[i]);
			  		}
			  	},
			  	error:function(e){
			  		
			  	}
			  });
			},
			clickBtn(){
				this.popupVisible = true;
			},
			ensure(){
				var _self = this;
				var commitdata = {
			  		id:_self.$route.params.id,
			  		score:_self.valueHalf,
			  		'comment':_self.introduction
			  };
				$.ajax({
			  	type:"post",
			  	contentType:'application/json;charset=UTF-8',
			  	url:this.utils.rootUrl + "fashion/fashionSaveComment",
			  	data:JSON.stringify(commitdata),
			  	success:function(res){
			  		console.log(JSON.stringify(res))
			  		_self.items.push(res.data);
			  		_self.popupVisible = false;
			  	},
			  	error:function(e){
			  		console.log(JSON.stringify(e));
			  	}
			  });
			}
        },
        filters: {
	        formatDate(time) {
	            return new Date(parseInt(time)).toISOString().substr(0,10);
	        }
	    }
    }
	
</script>

